<!--  -->
<template>
  <div>
    <el-button type="primary" @click="findMy()">查看我的订单</el-button>
    <el-button type="primary" @click="findFruit()">查看水果</el-button>
    <el-button type="primary" @click="gouwuche()">查看购物车</el-button>
    <el-table :data="shopcared" style="width: 100%">
      <el-table-column prop="fname" label="商品" width="80">
      </el-table-column>
      <el-table-column prop="price" label="订单总价" width="80">
      </el-table-column>
      <el-table-column prop="snumber" label="数量" width="120">
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template v-slot="scope">
            <el-button type="primary"  @click="jiesuan(scope.row)">结算</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 生成订单 -->
    <el-dialog :visible.sync="dialogFormVisible" title="查看详情">
      <el-form :model="order">
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="order.omessage" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="order.fname" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="order.onote" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="商品数量" :label-width="formLabelWidth">
          <el-input v-model="order.snumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品单价" :label-width="formLabelWidth">
          <el-input v-model="order.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品总价" :label-width="formLabelWidth">
          <el-input v-model="order.oprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="优惠券"  :label-width="formLabelWidth">
          <el-select v-model="order.ocoupan" placeholder="请选择状态">
            <el-option label="3元" value="1"></el-option>
            <el-option label="5元" value="0"></el-option>
          </el-select>
        </el-form-item>
        <!-- </template> -->
        <!-- <el-form-item label="余额" :label-width="formLabelWidth">
          <el-input v-model="o.umoney" autocomplete="off"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="addOrder()">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="Ordera" style="width: 100%">
      <el-table-column prop="oid" label="订单id" width="80">
      </el-table-column>
      <el-table-column label="订单状态" width="80">
        <template slot-scope="scope">
          <!-- {{ scope.row.ostate == 0 ? '未付款' : '已付款' }} -->
          <span v-if="scope.row.ostate == 0">未付款</span>
          <span v-if="scope.row.ostate == 1">已付款</span>
          <span v-if="scope.row.ostate == 2">派送中</span>
          <span v-if="scope.row.ostate == 3">已完成</span>
        </template>
      </el-table-column>
      <el-table-column prop="oprice" label="订单总价" width="80">
      </el-table-column>
      <el-table-column prop="omessage" label="地址" width="110">
      </el-table-column>
      <el-table-column prop="onote" label="商品备注" width="120">
      </el-table-column>
      <el-table-column prop="ocoupan" label="优惠" width="80">
      </el-table-column>
      <el-table-column prop="odiscount" label="打折比" width="80">
      </el-table-column>
        <el-table-column prop="uid" label="用户ID " width="80">
      </el-table-column>
      <el-table-column prop="orprice" label="实付价" width="80">
      </el-table-column>
      <el-table-column prop="otime" label="下单时间" width="160">
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template v-slot="scope">
            <el-button type="primary" v-if="scope.row.ostate == 0" @click="fukuan(scope.row)">付款</el-button>
            <el-button type="primary" v-if="scope.row.ostate == 1" @click="tuikuan(scope.row)">退款</el-button>
            <el-button type="primary" v-if="scope.row.ostate == 2" @click="shouhuo(scope.row)">收货</el-button>
            <el-button type="danger" v-if="scope.row.ostate == 0" @click="deleteOrder(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogFormVisible4Edit" title="查看详情">
      <el-form :model="shopcar">
        <el-form-item label="水果id" :label-width="formLabelWidth">
          <el-input v-model="shopcar.fid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="水果名称" :label-width="formLabelWidth">
          <el-input v-model="shopcar.fname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="种类" :label-width="formLabelWidth">
          <el-input v-model="shopcar.ftype" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input-number v-model="shopcar.snumber" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="小计" :label-width="formLabelWidth" v-model="shopcar.price">
           <!-- <el-input v-model="shopcar.price" autocomplete="off"></el-input> -->
           <span >{{shopcar.snumber*5}}</span>
        </el-form-item> 
        
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="addShopCar(shopcar)">加入购物车</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogFromTuikuan" title="退款">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" @click="refund()">{{Refund.rmoney}}退款</el-button>
    </el-dialog>
  </div>


</template>
<script >
const axios = require("axios");
axios.defaults.baseURL = '/api/'
export default {
  data() {
    return {
      Ordera: [],
      dialogFormVisible4Edit:false,
      dialogFormVisible:false,
      dialogFromTuikuan:false,
      shopcar:{
        sid:'',
        fid:'',
        uid:'',
        fname:'',
        ftype:'',
        snumber:0,
        price:6,
      },
      order: {
        oid: '',
        ostate: '',
        omessage: '阿大声道',
        oprice: '',
        onote: '',
        ocoupan: '',
        odiscount: '',
        uid: '',
        orprice: '',
        otime: '',
        num:'',
        p:''
      },
      options: [{
          value: '不想要了',
          label: '不想要了'
        }, {
          value: '发货太慢',
          label: '发货太慢'
        }, {
          value: '不喜欢这个，拍错了',
          label: '不喜欢这个，拍错了'
        }, {
          value: '买多了',
          label: '买多了'
        }, {
          value: '其他',
          label: '其他'
        }],
      Refund:{
        oid:'',
        uid:'',
        reason:'',
        rmoney:'',
      },
        value: '',
      shopcared:[],
      formLabelWidth: '120px'
    }
  },
  props: [],
  components: {},
  created() {
  },
  mounted() {
  },
  methods: {
    refund(){
      this.Refund.reason=this.value;
      console.log(this.Refund);
      console.log(this.value);
       axios({
          url:'/refund/addRefund',
          method:'post',
          data: this.Refund,
        }).then(res=>{
          console.log(res);
          this.dialogFromTuikuan=false
        })
      
    },
    tuikuan(t){
      this.Refund.oid=t.oid;
      this.Refund.uid=t.uid;
      this.Refund.rmoney=t.orprice
      console.log(t);
      this.dialogFromTuikuan=true;
    },
    addOrder(){
      console.log(this.order);
    },
    jiesuan(s){
      this.dialogFormVisible=true
      console.log(s);
      this.order=s;
      console.log(this.order);
    },
    gouwuche(){
      axios.get('/shopcar/myCar/1').then(res=>{
        this.shopcared = res.data;
        console.log(res.data);
      })
    },
      handleChange(value) {
        this.pirce=value*5;
        console.log(this.pirce);
        console.log(this.shopcar);
      },
      cancel: function () {
      this.$message.info("当前操作已取消")
      this.dialogTableVisible = false,
      this.dialogFormVisible4Edit=false
    },
    addShopCar(sh){
      alert(12)
      // this.price = this.snumber*5;
      sh.pirce=sh.snumber*5
      console.log(sh);
       axios({
        method: 'POST',
        url: '/shopcar/save',
        data: sh
      }).then(res=>{
        console.log(res);
       this.$message.success(res.data)
      })
    },
    findMy(){
      axios.get('/order/getOrderByUid/1').then(res=>{
        this.Ordera = res.data;
        console.log(res.data);
      })
    },
    fukuan(o){
       axios({
        method: 'POST',
        url: '/order/fukuan',
        data: o
      }).then(res=>{
       this.$message.success(res.data)
       this.findMy();
      })
    },
    shouhuo(o){
       axios({
        method: 'POST',
        url: '/order/shouhuo',
        data: o
      }).then(res=>{
       this.$message.success(res.data)
       this.findMy();
      })
    },
    findFruit: function(users){
      this.usered=users;
      this.dialogFormVisible4Edit=true
    },
    // findAll() {
    //   axios.get('/order/getOrderList').then(res => {
    //     this.Ordera = res.data;
    //     console.log(res.data);
    //   })
    // },
  //    size_change(newSize){
  //      this.pagesize = newSize
  //  },
  //  //监听 页码值 改变的事件
  //  current_change(newPage){
  //      this.currentPage = newPage
  //  },
    // cancel: function () {
    //   this.$message.info("当前操作已取消")
    //   this.dialogTableVisible = false,
    //   this.dialogFormVisible4Edit=false
    // },
    // addUser: function () {
    //   console.log(this.user.startday);
    //   axios({
    //     method: 'POST',
    //     url: '/users/addUsers',
    //     data: this.user
    //   })
    //     .then((resp) => {
    //       this.dialogTableVisible = false;
    //       this.$message.success("添加成功");
    //       this.findAll();
    //     })
    // },
    // updateOrder: function(order){
    //   this.order=order;
    //   this.dialogFormVisible4Edit=true
    // },
    // modifyOrder: function(){
    //   axios({
    //     method:'PUT',
    //     url:'/order/updateOrder',
    //     data: this.order
    //   }).then(res=>{
    //     this.dialogFormVisible4Edit=false,
    //     this.$message.success("修改成功");
    //     this.findAll();
    //   })
    // },
    deleteOrder: function (order) {
      console.log(order.oid);
      axios({
        method: 'delete',
        url: '/order/deleteOrder/' + order.oid,
      })
        .then((res) => {
          this.$message.success('删除成功');
          this.findMy();
        })
    },
  }
};
</script>
<style lang='scss'>
</style>